layui.use(['table', 'tree', 'util'], function(){
    var table = layui.table;
    var tree = layui.tree;
    var util = layui.util

    table.render({
        elem: '#test'
        ,url: Api.uaa.role
        ,method: 'get'
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{field:'roleId', title: 'ID', fixed: 'left', sort: true}
            ,{field:'roleName',title: '角色名称'}
            ,{field:'roleKey', title: '角色key'}
            ,{field:'dataScope', title: '数据范围'}
            ,{field:'roleSort',  title: '显示顺序'}
            ,{title: '状态', templet: function (row) {
                return row.status == '0' ? '启用' : '<span style="color: #FF5722">禁用</span>'
             }}
            ,{fixed: 'right', width:240, align:'center', toolbar: '#barDemo'}
        ]]
        ,page: true
        ,response: {
            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
        }
        ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.records //解析数据列表
            };
        }
    });
    //头工具栏事件
    table.on('toolbar(demo)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
                location.href = 'add.html';
                break;
            case 'delChecked':
                var data = checkStatus.data;
                if(data.length > 0) {
                    var platformIds = data.map(row => {return row.platformId}).join(',')
                }
                break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
                break;
            case 'isAll':
                layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;

            //自定义头工具栏右侧图标 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('这是工具栏右侧自定义的一个图标按钮');
                break;
        };
    });

    //监听工具条
    table.on('tool(demo)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.msg('ID：'+ data.id + ' 的查看操作');
        } else if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.alert('编辑行：<br>'+ JSON.stringify(data))
        } else if(obj.event === 'auth') {
            showAuth(data.roleName)
        }
    });

    function showAuth(roleName) {
        layer.open({
            type: 1, //页面层
            title: '授权',
            closeBtn: 0, //不显示关闭按钮
            shadeClose: true, //开启遮罩关闭
            skin: 'layui-layer-rim', //加上边框
            area: ['400px', '480px'], //宽高
            content: $("#auth")
            ,btn: ['确定', '取消']
            ,yes: function(index, layero){
                let checkedData = tree.getChecked('menuTree'); //获取选中节点的数据
                let checkedMenuIds = getChecked(checkedData, [])
                if(checkedMenuIds && checkedMenuIds.length > 0) {
                    $.ajax({
                        url: Api.uaa.auth
                        ,type: 'post'
                        ,data: {roleName: roleName, checkedMenuIds: checkedMenuIds.join(',')}
                        ,dataType: 'json'
                        ,success: function (res) {
                            layer.msg('success')
                            console.log(res);
                        }
                        ,error: function (xhr) {
                            layer.alert('error')
                            console.log(xhr);
                        }
                    })
                    layer.close(index);
                }
            }
            ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
        // 加载菜单树
        $.ajax({
            type: 'get',
            url: Api.uaa.auth,
            dataType: 'json',
            success: function(result) {
                //渲染
                var inst1 = tree.render({
                    elem: '#auth'  //绑定元素
                    ,id: 'menuTree'
                    ,showCheckbox: true  //是否显示复选框
                    ,data:  result.data
                    ,edit: ['add', 'update', 'del'] //操作节点的图标
                    ,click: function(obj){
                        var data = obj.data;  //获取当前点击的节点数据
                        layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                    }
                });
                setCheckedMenus(roleName)
            },
            error: function(xhr) {
                layer.alert('加载菜单错误!<br>' + xhr.responseJSON.msg)
            }
        });
    }

    function setCheckedMenus(roleName) {
        $.ajax({
            type: 'post',
            // url: config.api.auth.list + '/' + roleName,
            url: Api.uaa.menu.user,
            data: JSON.stringify({roleNames: roleName, platformId: getTokenInfo().platformId}),
            contentType: 'application/json;charset=UTF-8',
            dataType: 'json',
            success: function(result) {
                let arr = getChildMenuIds(result.data, [])
                tree.setChecked('menuTree', arr); //勾选指定节点
            },
            error: function(xhr) {
                layer.alert('加载菜单错误!<br>' + xhr.responseJSON.msg)
            }
        });
    }

    /**
     * 递归获取选中节点的id
     * @param data 选中的菜单对象集合
     * @param arr 返回值，存储选中的菜单id
     */
    function getChecked(data, arr) {
        for(let menu of data) {
            arr.push(menu.id)
            if (menu.children && menu.children.length > 0) {
                getChecked(menu.children, arr)
            }
        }
        return arr;
    }
    /**
     * 因为layui树控件选中子节点就自动选中父节点
     * 所以本函数使用递归从选中节点的数组中筛选出子节点
     * @param data 选中节点的数组
     * @param arr 返回值，存储选中的子节点
     */
    function getChildMenuIds(data, arr) {
        for(let item of data) {
            if(item.children && item.children.length > 0) {
                getChildMenuIds(item.children, arr)
            } else {
                arr.push(item.id)
            }
        }
        return arr;
    }
});
